<template>
  <el-dialog
    v-model="dialogVisibleStore"
    title="添加店铺"
    width="900px"
    class="dialog-store-add-box"
    :before-close="AddStoreCancelFunc"
  >
    <el-scrollbar max-height="60vh">
      <el-form
        :model="storeForm"
        :rules="storeRules"
        ref="ruleFormStore"
        label-width="auto"
        inline
      >
        <el-form-item label="店铺照片" prop="storeImg" style="width: 80%">
          <el-upload
            class="avatar-uploader"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            accept="image/*"
            :on-change="beforeAvatarUpload"
          >
            <img
              v-if="storeForm.storeImg"
              :src="storeForm.storeImg"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺名称" prop="storeName">
          <el-input
            v-model="storeForm.storeName"
            clearable
            class="store-el-input-box"
            placeholder="请输入店铺名称"
          />
        </el-form-item>
        <el-form-item label="营业时间" prop="businessHours">
          <div class="store-el-input-box">
            <el-time-picker
              v-model="storeForm.businessHours"
              is-range
              format="HH:mm"
              value-format="HH:mm"
              class="store-el-input-box"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-select
            v-model="storeForm.industry"
            clearable
            placeholder="请选择"
            class="store-el-input-box"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="子公司" prop="subsidiary">
          <el-cascader
            class="store-el-input-box"
            clearable
            :props="{
              checkStrictly: true,
            }"
            v-model="storeForm.subsidiary"
            :options="cityOption"
          />
        </el-form-item>
        <el-form-item label="省市区" prop="cityVal">
          <el-cascader
            class="store-el-input-box"
            clearable
            v-model="storeForm.cityVal"
            :options="cityOption"
          />
        </el-form-item>
        <el-form-item label="业务人员" prop="salesman">
          <el-select
            v-model="storeForm.salesman"
            clearable
            placeholder="请选择"
            class="store-el-input-box"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细位置" prop="address">
          <el-autocomplete
            v-model="storeForm.address"
            class="store-el-input-box"
            clearable
            @clear="autocompleteFunc"
            @select="autocompleteFunc"
            :fetch-suggestions="querySearchAsync"
            placeholder="搜索详细位置"
          >
            <!-- <template #suffix>
              <div class="map-icon" @click.stop="MapshowFunc">
                <el-icon color="#3B75FF" size="18"><Position /></el-icon>
              </div>
            </template> -->
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="商家" prop="storeMan">
          <el-select
            v-model="storeForm.storeMan"
            clearable
            placeholder="请选择"
            class="store-el-input-box"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="sotre-btn-cancel" @click="AddStoreCancelFunc">取消</el-button>
        <el-button class="sotre-btn-submit" type="primary" @click="sotreAddSubmitFunc('ruleFormStore')">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
})
let dialogVisibleStore = ref(false)
watch(
  () => props.show,
  (newValue, oldValue) => {
    dialogVisibleStore.value = props.show
  }
)
const emit = defineEmits(['onClose'])
// 表单重置
const AddStoreCancelFunc = () => {
  that.$refs.ruleFormStore.resetFields()
  nextTick(() => {
    emit('onClose', false)
  })
}
let options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
])
let cityOption = ref([
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
])

let storeForm = ref({
  storeImg: '',
  storeFile: '',
  storeName: '',
  businessHours: '',
  industry: '',
  subsidiary: '',
  cityVal: '',
  salesman: '',
  address: '',
  storeMan: '',
  longitude: '',
  latitude: '',
})
let storeRules = ref({
  storeImg: [{ required: true, message: '请上传店铺照片', trigger: 'change' }],
  storeName: [{ required: true, message: '请输入店铺名称', trigger: 'change' }],
  businessHours: [
    { required: true, message: '请选择营业时间', trigger: 'change' },
  ],
  industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
  subsidiary: [{ required: true, message: '请选择子公司', trigger: 'change' }],
  cityVal: [{ required: true, message: '请选择省市区', trigger: 'change' }],
  salesman: [{ required: true, message: '请选择业务人员', trigger: 'change' }],
  address: [{ required: true, message: '请输入详细位置', trigger: 'change' }],
  // storeMan: [{ required: true, message: '', trigger: 'change' }],
})
const autocompleteFunc = e => {
  console.log(e)
  if (e) {
    storeForm.value.longitude = e.location.lng
    storeForm.value.latitude = e.location.lat
  } else {
    storeForm.value.longitude = ''
    storeForm.value.latitude = ''
  }
}
const querySearchAsync = (str, cb) => {
  console.log(str)
  if (!str) return cb([])
  txMapApi
    .suggestionApi({
      key: '2LMBZ-YHK6J-J2VF4-D2GP4-W6X6Q-QOFFA',
      keyword: str,
    })
    .then(res => {
      console.log(res)
      res.data.forEach(element => {
        element.value = element.address + element.title
      })
      return cb(res.data)
    })
}
// 上传店铺照片
const beforeAvatarUpload = e => {
  console.log(e)
  storeForm.value.storeImg = URL.createObjectURL(e.raw)
  storeForm.value.storeFile = e.raw
  that.$refs.ruleFormStore.validateField('storeImg')
}
const sotreAddSubmitFunc = formName => {
  let storeFormVal = storeForm.value
  console.log(storeFormVal)
  that.$refs[formName].validate(valid => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
</script>
<style lang="scss">
@import './store_dislog.scss';
</style>